<template>
    <div>
        <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            
            <a-row :gutter="[2,2]">
                <!-- <a-tabs v-if="formAttributes['type']=='tab'"> 
                    
                    <a-tab-pane :forceRender="true" v-for="(tabs,idx) in formAttributes['formItems']" :key="idx" :tab="tabs['title']">
                        <a-row >
                            <a-col v-for="(item,i) in tabs['fields']" :key="i" :span="tabs['columns']?24/(tabs['columns']>3?3:tabs['columns']):24/(mostColumns>3?3:mostColumns)">
                                <formItem  v-if="item"  :item="item" :changeItem="changeItem" :form="form"></formItem>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    
                </a-tabs>
                    <a-card  v-else-if="formAttributes['type']=='card'" v-for="(tabs,idx) in formAttributes['formItems']" :key="idx" :bordered="false" :title="tabs['title']">
                        <a-row>
                            <a-col v-for="(item,i) in tabs['fields']" :key="i" :span="tabs['columns']?24/(tabs['columns']>3?3:tabs['columns']):24/(mostColumns>3?3:mostColumns)">
                                <formItem  v-if="item"  :item="item" :changeItem="changeItem" :form="form"></formItem>
                            </a-col>
                        </a-row>
                    </a-card>
                <template v-else>
                    
                     <div v-for="(tabs,idx) in formAttributes['formItems']" :key="idx">
                        <a-row :gutter="10">
                            <a-col v-for="(item,i) in tabs['fields']" :key="i" :span="tabs['columns']?24/(tabs['columns']>3?3:tabs['columns']):24/(mostColumns>3?3:mostColumns)">
                                <formItem v-if="item" :item="item" :changeItem="changeItem" :form="form"></formItem>
                            </a-col>
                        </a-row >
                    </div>
                    
                </template> -->
               
                <a-row v-for="(tabs,idx) in formAttributes['formItems']" :key="idx">
                    <a-col v-for="(item,i) in tabs['fields']" :key="i" :span="tabs['columns']?24/(tabs['columns']>3?3:tabs['columns']):24/(mostColumns>3?3:mostColumns)">
                        <formItem v-if="item" :item="item" :changeItem="changeItem" :form="form" @clickEventHandler="clickEventHandler" @showIconSelect="showIconSelect"></formItem>
                    </a-col>
                </a-row >
               
            </a-row>
        </a-form>

        <LiconSelect ref="liconSelect"></LiconSelect>
    </div>
</template>
<script>

import formItem from '@/components/lt/form/LFormItem'
import LiconSelect from '@/components/lt/LIconSelect.vue'

export default {
    name:'LForm',
    components:{LiconSelect,formItem},
    props:{
        mostColumns:{
            type:Number,
            default:1
        },
        formAttributes:{
           type:Object,
           default:()=>{}
        },
        labelCol:{
            type:Object,
            default:()=>{
                return {sm: { span: 8 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:()=>{
                return {sm: { span: 16 }}
            }
        },
        onChange:Function,
        onClick:Function,
    },
    data(){
        return{
            form:{},
            changeItem:{},//表单中当前改变值的组件，键值对
            that:this
        }
    },
   
    created(){
        this.form=this.$form.createForm(this,{onValuesChange:this.valueChange}) 
    },
    methods:{
        getForm(){
            return this.form
        },
        valueChange(props, values){
            this.changeItem = values
            this.changeEventHandler()
        },
        changeEventHandler(){
            if(this.changeItem){
                let item = JSON.parse(JSON.stringify(this.changeItem))
                if(Object.getOwnPropertyNames(item).length==1){
                    this.$emit("changeEventHandler",item)
                }
            }
        },
        clickEventHandler(field,form){
            this.$emit("clickEventHandler",field,form)
        },
        showIconSelect(field,form){
            this.$refs['liconSelect'].show(field,form)
        }
        /* 
         @change="(e) => changeEventHandler(item['field'],e)"
        changeEventHandler(changeField,e){
            if(changeField && changeField!=""){
                let val;
                if(e.target){
                val = e.target.value
                }else{
                    val = e
                }
                this.$emit("onChange",{field:changeField,val:val})
            }
        }
        */
    }
}
</script>